<template>
    <div id="imgbox" >
                <div v-if="this.$store.state.imgurl==''" @click="altercli" id="topblock"></div>
                    <img id="imgb" v-if="this.$store.state.imgurl==''" src="../static/temp.png" alt="">
               <img id="imgb" v-else :src="this.$store.state.imgurl" alt="">
        <el-select id="qrsize" v-model="value" placeholder="请选择二维码尺寸" @change="chagesize">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
<a :href="this.$store.state.imgurl" :download="getName"><div id="downbutton">下载图片</div></a>
    </div>

</template>

<script>
export default {
name:'Qrimg',
    data(){
        return{
             options: [{
          value: '1000',
          label: '尺寸：1000*1000'
        }, {
          value: '800',
          label: '尺寸：800*800'
        }, {
          value: '600',
          label: '尺寸：600*600'
        }, {
          value: '400',
          label: '尺寸：400*400'
        }, {
          value: '200',
          label: '尺寸：200*200'
        }],
        value: '' 
            }
    },
computed: {
    getName(){
      if(this.$store.state.history==""){
          return "芯云二维码"
}
      if(this.$store.state.history[this.$store.state.history.length-1].name.length<25)
      return this.$store.state.history[this.$store.state.history.length-1].name
      else
      {
      //  this.$message('内容过长，已自动重命名');
        return "芯云二维码"
}  
    }
    },
methods:{
    chagesize(){
    this.$store.state.size=this.value;
},
  altercli(){
    this.$message({
          message: '好像还没有任何二维码哦',
          type: 'warning'
        });
}
}
}
</script>

<style >
#imgbox{
    position: absolute;
    left: 1100px;
    top:140px;
    width: 200px;
    height: 200px;
    background-color: aliceblue;
    clear: left;
}
#imgb{
    width: 210px;
    height: 210px;
    background-image: url(../static/temp.png);
}
#downbutton{
    margin-top:25px ;
    margin-bottom:30px ;
    width: 200px;
    height: 40px;
    background-color:#3785ED;
    text-align: center;
    color: white;
    border: solid 1px rgb(228, 224, 224);
    border-radius:3px ;
    line-height: 40px;
    cursor:default;
}
#downbutton:hover{
    opacity: 0.8;
}
#dow{
position: absolute;
left:35%;
top:270px;
/* color:aqua; */
}
#qrsize{
    position: relative;
    top:10px;
}
a{
    color: white;
    text-decoration: none;
}
#topblock{
  position: absolute;
  top:280px;
  width: 210px;
  height: 40px;
  background-color: transparent;
;
}
</style>